<template>
  <div style="position: relative; z-index: 8; height: 100%;">
    <!--  电流报表  -->
    <div class="top">
      <div class="l">
        <el-select v-model="buildingName" filterable placeholder="请选择" style="width: 200px;">
          <el-option :label="item.name" :value="item.name" v-for="item in lampData"/>
        </el-select>
        <el-date-picker
            v-model="logTime"
            type="datetimerange"
            range-separator="~"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 400px; flex-shrink: 0; margin-left: 10px;"
        />
        <div class="def-btn" style="margin-left: 10px; margin-right: 30px" @click="searchHandle">搜索</div>
      </div>
<!--      <div class="r">
        <div class="sure-btn down-btn" @click="downLoadExcel">导出</div>
      </div>-->
    </div>
    <div style="height: calc(100% - 78px)">
      <electric-line-echarts :echartsData="echartsData" :unit="unit" :xData="xData"></electric-line-echarts>
    </div>
  </div>
</template>

<script>
import {lampeEectricLogs, getLogs, TowerZongLan, BrigeZongLan} from "../../router/api.js";
import {downBlobFile, downloadFile, getNowFormatDate, subtractDay} from "../../util/index.js";
import BaseTable from "../../components/baseTable.vue";
import ElectricLineEcharts from "./modules/electricLineEcharts.vue";
export default {
  name: "currentReport",
  components: {ElectricLineEcharts, BaseTable },
  data() {
    return {
      buildingName: '',
      pagination: {
        page: 1,
        size: 17,
        total: 0,
      },
      tableData: [],
      logTime: [],
      echartsData: [],
      unit: '时间',
      xData: [],
      lampData: [],
      currentLamp: {},
      lampIdx: 0,
    }
  },
  watch:{
    'currentNav': {
      deep: true,
      handler(){
        this.lampIdx = 0;
        this.getLampData()
      }
    }
  },
  created() {
    this.getLampData()
  },
  methods: {
    async init() {
      let startTimeStr = '', endTimeStr = '';
      if(this.logTime.length){
        startTimeStr = this.logTime[1];
        endTimeStr = this.logTime[0];
      }else{
        let nowDate = getNowFormatDate();
        let oldDate = subtractDay(-1);
        endTimeStr = nowDate.ymd +' 12:00:00';
        startTimeStr = oldDate.ymd +' 12:00:00';
      }
      this.logTime = [endTimeStr,startTimeStr]

      let res = await lampeEectricLogs({
        startTimeStr: this.logTime[0],
        endTimeStr: this.logTime[1],
        buildingName: this.buildingName,
        // page: this.pagination.page,
        // size: this.pagination.size,
      })
      if (res.data.code == 200) {
        if ( res.data.data) {
          this.echartsData = [];
          let data = res.data.data;
          let aArea = [], bArea = [], cArea = [], xData = [];
          data.forEach(opt => {
            switch (opt.electricType) {
              case "A相电流":
                aArea.push(opt.electricReading)
                break;
              case "B相电流":
                bArea.push(opt.electricReading)
                break;
              case "C相电流":
                cArea.push(opt.electricReading)
                break;
            }
            xData.push(opt.creatTime)
          })
          xData = [...new Set(xData)]

          this.echartsData.push(aArea,bArea,cArea);
          this.xData = xData;
          // this.pagination.total = res.data.data.total;
        }
      } else {
        // this.tableData = [];
        // this.pagination.total = 0;
        // this.$message.warning(res.data.msg)
      }
    },
    async getLampData() {
      let resLamp = await TowerZongLan();
      let resLampBridge = await BrigeZongLan()
      let lighthouse = [], lampBridge = [];
      if (resLamp.data.code == 200) {
        resLamp.data.data.forEach(opt => {
          lighthouse.push({ name: opt.towername })
        })
      }else{
        this.$message.warning('无法请求服务器资源，请确认服务器是否开启')
      }
      if (resLampBridge.data.code == 200) {
        resLampBridge.data.data.forEach(opt => {
          lighthouse.push({ name: opt.brigename })
        })
      }
      this.lampData = [...lighthouse,...lampBridge];
      // this.lampData.sort((a,b) => a.locationUi - b.locationUi)
      // this.lampData.unshift({ towername:'总览', id: -1 })
      /*this.lampData = [{ towername:'总览', id: -1 }, ...lighthouse];
      if (this.lampData.length >= 3) {
        this.lampData.splice(3, 0, ...lampBridge)
      } else {
        this.lampData.push(...lampBridge)
      }*/
      this.buildingName = this.lampData[0].name

      await this.init();
    },
    downLoadExcel() {
      if(!this.logTime.length) return;
      downBlobFile('/api/opt/user/exportLogsByTime',{
        startTime: this.logTime[0],
        endTime: this.logTime[1],
      },`日志报表.xlsx`,'GET')
    },
    currentChange(val) {
      this.pagination.page = val;
      this.init();
    },
    searchHandle(){
      this.pagination.page = 1;
      this.init();
    },
    lampHandle(item, idx) {
      this.currentLamp = item;
      this.lampIdx = idx;
      this.getEchartsData();
    },
  }
}
</script>

<style scoped lang="scss">
.down-btn:before {
  content: "\e60d";
}

.top {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 20px;

  .l {
    display: flex;
    align-items: center;
  }

  .r {
    display: flex;

    .def-btn {
      width: initial;
      padding: 0 14px;
    }
  }
}
</style>

